<template>
  <div class="synopsis">
    <div class="photo">
      <span v-if="$cookies.get('userMsg')">
        <img  :src="$cookies.get('userMsg').user_profile" />
      </span>
      
    </div>
    <div class="name">
      <router-link to="/user" tag="span">
        <span v-if="$cookies.get('userMsg')">
          {{$cookies.get('userMsg').user_nickname}}
        </span>
      </router-link>
      <router-link to="/login" tag="span" style="color:green">
        <span v-if="!$cookies.get('userMsg')">
          请登录
        </span>
      </router-link>
    </div>
    <div class="jobtime">工作经验: <span v-if="$cookies.get('userMsg')">{{$cookies.get('userMsg').user_experience}}</span></div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
  name: "MySynopsis",
  data(){
    return{

    }
  },
  computed: {
      ...mapState({userMsg: "userMsg"})
  },
  methods:{
    
  },
  mounted(){
  }
};
</script>
<style lang="scss" scoped>
@import "~styles/varibles.styl";

.synopsis {
  position: relative;
  overflow: hidden;
  color: #ffffff;
  background-image: linear-gradient(to bottom right, #44ddff, #44ddff);
  height: 40vw;
  font-size: 0.32rem;
  // display: flex;
  // justify-content: center;
  // align-items: center;
  .photo {
    width: 25vw;
    height: 25vw;
    border: 0.05rem solid white;
    position: absolute;
    left: 5vw;
    top:0;
    bottom:0;
    margin:auto 0;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 0.5rem white;
    img {
      width: 100%;
    }
  }
  .name {
    position: absolute;
    top: 10vw; 
    left: 35vw;
    font-size: 0.5rem;
  }
  .jobtime {
    position: absolute;
    bottom: 10vw; 
    left: 35vw;

  }
  
}
</style>
